/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'selector',
  /*tailwindcss4不需要，这里先加上 todo*/
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        "color-change-2x": "color-change-2x 2s linear  infinite alternate both"
      },
      keyframes: {
        "color-change-2x": {
          "0%": {
            background: "var(--color-indigo-500)"
          },
          to: {
            background: "var(--color-blue-700)"
          }
        },
      },
    },
    scrollbar: (theme) => ({
      DEFAULT: {
        size: theme('spacing.2'),
        track: {
          background: theme('colors.gray.200'),
          darkBackground: theme('colors.gray.800'),
        },
        thumb: {
          background: theme('colors.gray.300'),
          darkBackground: theme('colors.gray.700'),
          borderRadius: '20px'
        },
        hover: {
          background: theme('colors.gray.400'),
          darkBackground: theme('colors.gray.600'),
        },
      },
      dark: {
        size: '6px',
        track: {
          background: theme('colors.gray.900'),
        },
        thumb: {
          background: theme('colors.gray.700'),
          borderRadius: '20px'
        },
        hover: {
          background: theme('colors.gray.600'),
        },
      },
      thin: {
        size: '3px',
        track: {
          background: theme('colors.gray.200'),
          darkBackground: theme('colors.slate.800'),
        },
        thumb: {
          background: theme('colors.gray.300'),
          darkBackground: theme('colors.slate.700'),
        },
        hover: {
          background: theme('colors.gray.400'),
          darkBackground: theme('colors.slate.600'),
        },
      },
    }),
  },
  corePlugins: {
    //preflight: false //不禁用样式预设
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwindcss-animate'),
  ],
}

